<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报警中心 - 智能工业数据采集与分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: #2c3e50;
            color: white;
            min-height: 100vh;
            position: fixed;
        }
        .sidebar a {
            color: #ecf0f1;
            display: block;
            padding: 12px 15px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #34495e;
        }
        .sidebar a.active {
            background-color: #16a085;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-green {
            background-color: #27ae60;
        }
        .status-yellow {
            background-color: #f39c12;
        }
        .status-red {
            background-color: #e74c3c;
        }
        .alarm-card {
            border-left: 4px solid #e74c3c;
            background-color: #fff5f5;
        }
        .alarm-card.warning {
            border-left: 4px solid #f39c12;
            background-color: #fff9e6;
        }
        .alarm-card.info {
            border-left: 4px solid #3498db;
            background-color: #e6f3ff;
        }
        .alarm-card.acknowledged {
            background-color: #f5f5f5;
        }
        .alarm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .alarm-time {
            font-size: 0.9rem;
            color: #666;
        }
        .alarm-source {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .alarm-message {
            margin-bottom: 10px;
        }
        .filter-section {
            margin-bottom: 20px;
        }
        .acknowledge-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .acknowledge-btn:hover {
            background-color: #2980b9;
        }
        .acknowledge-btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
            margin-bottom: 20px;
        }
        .badge-warning {
            background-color: #f39c12;
        }
        .badge-danger {
            background-color: #e74c3c;
        }
        .badge-info {
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <div class="sidebar" style="width: 250px;">
        <div class="sidebar-header p-4 text-center">
            <h4><i class="fa fa-industry"></i> 工业数据系统</h4>
        </div>
        <div class="sidebar-menu">
            <a href="/" class=""><i class="fa fa-dashboard mr-2"></i> 仪表盘</a>
            <a href="/dashboard"><i class="fa fa-bar-chart mr-2"></i> 数据监控</a>
            <a href="/alarms" class="active"><i class="fa fa-bell mr-2"></i> 报警中心</a>
            <a href="/maintenance"><i class="fa fa-wrench mr-2"></i> 维护管理</a>
            <a href="/reports"><i class="fa fa-file-text mr-2"></i> 报表生成</a>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>报警中心</h2>
                        <div class="d-flex align-items-center">
                            <span id="connection-status" class="mr-4">
                                <span class="status-indicator status-green"></span>
                                <span>系统正常</span>
                            </span>
                            <span id="current-time">--:--:--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报警统计 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">紧急报警</h5>
                                <i class="fa fa-exclamation-triangle fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">0</p>
                            <p class="card-text">过去24小时内</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">警告</h5>
                                <i class="fa fa-warning fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">2</p>
                            <p class="card-text">过去24小时内</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">信息</h5>
                                <i class="fa fa-info-circle fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">5</p>
                            <p class="card-text">过去24小时内</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">已确认</h5>
                                <i class="fa fa-check-circle fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">7</p>
                            <p class="card-text">过去24小时内</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报警类型分布 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">报警类型分布</h5>
                            <div class="chart-container">
                                <canvas id="alarmTypeChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">报警时间分布</h5>
                            <div class="chart-container">
                                <canvas id="alarmTimeChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 筛选器 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">筛选条件</h5>
                            <div class="filter-section">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="alarm-level">报警级别</label>
                                            <select id="alarm-level" class="form-control">
                                                <option value="all">全部级别</option>
                                                <option value="emergency">紧急</option>
                                                <option value="warning">警告</option>
                                                <option value="info">信息</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="alarm-source">来源设备</label>
                                            <select id="alarm-source" class="form-control">
                                                <option value="all">全部设备</option>
                                                <option value="temperature">温度传感器</option>
                                                <option value="pressure">压力传感器</option>
                                                <option value="vibration">振动传感器</option>
                                                <option value="system">系统</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="alarm-status">确认状态</label>
                                            <select id="alarm-status" class="form-control">
                                                <option value="all">全部状态</option>
                                                <option value="unacknowledged">未确认</option>
                                                <option value="acknowledged">已确认</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="time-range">时间范围</label>
                                            <select id="time-range" class="form-control">
                                                <option value="24h">过去24小时</option>
                                                <option value="7d">过去7天</option>
                                                <option value="30d">过去30天</option>
                                                <option value="custom">自定义</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12 text-right">
                                        <button id="filter-btn" class="btn btn-primary">应用筛选</button>
                                        <button id="reset-btn" class="btn btn-secondary ml-2">重置筛选</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 当前报警 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">当前报警</h5>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-danger mr-2">紧急: 0</span>
                                    <span class="badge bg-warning mr-2">警告: 2</span>
                                    <span class="badge bg-info">信息: 0</span>
                                </div>
                            </div>
                            
                            <!-- 报警列表 -->
                            <div class="alarm-list">
                                <!-- 警告报警 -->
                                <div class="card mb-3 alarm-card warning">
                                    <div class="card-body">
                                        <div class="alarm-header">
                                            <div>
                                                <span class="badge badge-warning mr-2">警告</span>
                                                <span class="alarm-time">2023-05-15 14:32:45</span>
                                            </div>
                                            <button class="acknowledge-btn" data-alarm-id="1">确认报警</button>
                                        </div>
                                        <div class="alarm-source">温度传感器1</div>
                                        <div class="alarm-message">温度接近阈值上限 (47.8°C, 阈值: 50°C)</div>
                                        <div class="mt-2">
                                            <small class="text-muted">设备ID: temp_sensor_001 | 位置: 生产车间A区 | 关联参数: temperature</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card mb-3 alarm-card warning">
                                    <div class="card-body">
                                        <div class="alarm-header">
                                            <div>
                                                <span class="badge badge-warning mr-2">警告</span>
                                                <span class="alarm-time">2023-05-15 13:15:22</span>
                                            </div>
                                            <button class="acknowledge-btn" data-alarm-id="2">确认报警</button>
                                        </div>
                                        <div class="alarm-source">振动传感器2</div>
                                        <div class="alarm-message">振动值超过建议阈值 (3.2V, 建议阈值: 3.0V)</div>
                                        <div class="mt-2">
                                            <small class="text-muted">设备ID: vibration_sensor_002 | 位置: 生产车间B区 | 关联参数: vibration</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 历史报警 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">历史报警</h5>
                                <div class="d-flex">
                                    <button id="load-more-btn" class="btn btn-secondary">加载更多</button>
                                </div>
                            </div>
                            
                            <!-- 历史报警列表 -->
                            <div class="alarm-list">
                                <!-- 已确认的报警 -->
                                <div class="card mb-3 alarm-card info acknowledged">
                                    <div class="card-body">
                                        <div class="alarm-header">
                                            <div>
                                                <span class="badge badge-info mr-2">信息</span>
                                                <span class="alarm-time">2023-05-15 10:22:18</span>
                                            </div>
                                            <span class="text-success"><i class="fa fa-check-circle mr-1"></i> 已确认</span>
                                        </div>
                                        <div class="alarm-source">系统</div>
                                        <div class="alarm-message">定期维护提醒: 距离上次维护已30天</div>
                                        <div class="mt-2">
                                            <small class="text-muted">确认时间: 2023-05-15 10:25:33 | 确认人: 张工程师</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card mb-3 alarm-card warning acknowledged">
                                    <div class="card-body">
                                        <div class="alarm-header">
                                            <div>
                                                <span class="badge badge-warning mr-2">警告</span>
                                                <span class="alarm-time">2023-05-14 16:48:30</span>
                                            </div>
                                            <span class="text-success"><i class="fa fa-check-circle mr-1"></i> 已确认</span>
                                        </div>
                                        <div class="alarm-source">压力传感器1</div>
                                        <div class="alarm-message">压力值异常波动 (6.2bar, 正常值: 5.0±0.5bar)</div>
                                        <div class="mt-2">
                                            <small class="text-muted">确认时间: 2023-05-14 16:52:15 | 确认人: 李工程师</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 图表对象
        let alarmTypeChart, alarmTimeChart;

        // 初始化报警类型分布图
        function initAlarmTypeChart() {
            const ctx = document.getElementById('alarmTypeChart').getContext('2d');
            
            // 模拟数据
            const data = {
                labels: ['温度传感器', '压力传感器', '振动传感器', '系统'],
                datasets: [
                    {
                        label: '紧急',
                        data: [0, 0, 0, 0],
                        backgroundColor: '#e74c3c'
                    },
                    {
                        label: '警告',
                        data: [1, 1, 0, 0],
                        backgroundColor: '#f39c12'
                    },
                    {
                        label: '信息',
                        data: [0, 1, 0, 4],
                        backgroundColor: '#3498db'
                    }
                ]
            };
            
            alarmTypeChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        x: {
                            stacked: true,
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 初始化报警时间分布图
        function initAlarmTimeChart() {
            const ctx = document.getElementById('alarmTimeChart').getContext('2d');
            
            // 模拟数据
            const data = {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                datasets: [
                    {
                        label: '报警次数',
                        data: [1, 0, 2, 1, 3, 0],
                        backgroundColor: 'rgba(231, 76, 60, 0.5)',
                        borderColor: 'rgba(231, 76, 60, 1)',
                        borderWidth: 1,
                        tension: 0.4,
                        fill: true
                    }
                ]
            };
            
            alarmTimeChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        }

        // 更新系统状态
        function updateSystemStatus() {
            fetch('/api/get_status')
                .then(response => response.json())
                .then(data => {
                    // 更新连接状态
                    const connectionStatus = document.getElementById('connection-status');
                    if (data.connected) {
                        connectionStatus.innerHTML = '<span class="status-indicator status-green"></span><span>系统正常</span>';
                    } else {
                        connectionStatus.innerHTML = '<span class="status-indicator status-red"></span><span>连接断开</span>';
                    }
                })
                .catch(error => {
                    console.error('获取系统状态失败:', error);
                });
        }

        // 确认报警
        function acknowledgeAlarm(alarmId) {
            fetch(`/api/acknowledge_alarm?alarm_id=${alarmId}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新UI
                    const alarmCard = document.querySelector(`.acknowledge-btn[data-alarm-id="${alarmId}"]`).closest('.alarm-card');
                    const btn = document.querySelector(`.acknowledge-btn[data-alarm-id="${alarmId}"]`);
                    
                    // 添加已确认样式
                    alarmCard.classList.add('acknowledged');
                    
                    // 替换按钮为已确认状态
                    const now = new Date();
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    const seconds = String(now.getSeconds()).padStart(2, '0');
                    const currentTime = `${hours}:${minutes}:${seconds}`;
                    
                    btn.outerHTML = `<span class="text-success"><i class="fa fa-check-circle mr-1"></i> 已确认</span>`;
                    
                    // 更新报警计数
                    updateAlarmCounts();
                    
                    // 显示成功消息
                    alert('报警确认成功!');
                } else {
                    alert('报警确认失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('确认报警失败:', error);
                alert('确认报警失败，请重试!');
            });
        }

        // 更新报警计数
        function updateAlarmCounts() {
            // 此处应该从API获取最新的报警计数
            // 这里简化处理，直接减少未确认的警告计数
            const warningBadge = document.querySelector('.badge.bg-warning');
            if (warningBadge && warningBadge.textContent.includes('警告:')) {
                const currentCount = parseInt(warningBadge.textContent.split(':')[1].trim());
                if (currentCount > 0) {
                    warningBadge.textContent = `警告: ${currentCount - 1}`;
                }
            }
        }

        // 应用筛选条件
        function applyFilters() {
            const level = document.getElementById('alarm-level').value;
            const source = document.getElementById('alarm-source').value;
            const status = document.getElementById('alarm-status').value;
            const timeRange = document.getElementById('time-range').value;
            
            // 这里应该调用API获取筛选后的报警数据
            console.log('应用筛选条件:', { level, source, status, timeRange });
            
            // 模拟加载中
            alert('筛选条件已应用，正在更新报警列表...');
        }

        // 重置筛选条件
        function resetFilters() {
            document.getElementById('alarm-level').value = 'all';
            document.getElementById('alarm-source').value = 'all';
            document.getElementById('alarm-status').value = 'all';
            document.getElementById('time-range').value = '24h';
        }

        // 加载更多历史报警
        function loadMoreAlarms() {
            // 这里应该调用API加载更多历史报警数据
            console.log('加载更多历史报警');
            
            // 模拟加载中
            alert('正在加载更多历史报警...');
        }

        // 事件监听器：确认报警按钮
        document.querySelectorAll('.acknowledge-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const alarmId = this.getAttribute('data-alarm-id');
                acknowledgeAlarm(alarmId);
            });
        });

        // 事件监听器：筛选按钮
        document.getElementById('filter-btn').addEventListener('click', applyFilters);
        document.getElementById('reset-btn').addEventListener('click', resetFilters);
        document.getElementById('load-more-btn').addEventListener('click', loadMoreAlarms);

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化图表
            initAlarmTypeChart();
            initAlarmTimeChart();
            
            // 初始化系统状态
            updateSystemStatus();
            
            // 定期更新系统状态
            setInterval(updateSystemStatus, 5000);
        });
    </script>
</body>
</html>